<template>
  <div class="gradient-color">
    <a-dropdown :trigger="['click']" :visible="visible" @visibleChange="handleVisibleChange">
      <div class="input" :style="{background}"></div>
      <div slot="overlay" class="popup" style="width: 320px">
        <div class="content">


          <a-form-model class="color-arr-form" ref="formRef" :model="value" layout="inline">
            <span>渐变方向</span>
            <a-form-model-item
              label="偏转角度"
              prop="angle"
              class="item"
            >
              <a-slider v-model="value.angle" :min="0" :max="360" />
            </a-form-model-item>
            <span>颜色透明</span>
            <a-form-model-item
              label="透明度"
              prop="opacity"
              class="item"
            >
              <a-slider v-model="value.opacity" :min="0" :max="1" :step="0.05" />
            </a-form-model-item>
            <span>颜色数组</span>
            <div
              v-for="(item, index) in value.color"
              :key="index"
              class="item"
            >
              <a-form-model-item
                :label="`颜色${index + 1}`"
                :prop="`color.${index}`"
                class="color-item"
              >
                <a-input type="color" @change="(e)=> handleColorChange(e, index)" :value="item"/>
              </a-form-model-item>
              <a-form-model-item class="btn">
                <a-button type="dashed" :disabled="value.color.length < 2" @click="() => removeColor(index)">
                  <a-icon
                    class="dynamic-delete-button"
                    type="minus-circle-o"

                  />
                </a-button>
              </a-form-model-item>

              <a-form-model-item class="btn">
                <a-button type="dashed" @click="()=> addColor(index)">
                  <a-icon type="plus" />
                </a-button>
              </a-form-model-item>
            </div>


          </a-form-model>

        </div>

      </div>

    </a-dropdown>

  </div>
</template>

<script >

import {getGradientBg} from "./gradientBg"

export default {
  props: {
    value: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      visible: false
    }
  },
  methods: {
    addColor(index){
      const {
        color
      } = this.value
      color.push('#ffffff')
    },
    removeColor(index){
      const {
        color
      } = this.value
      color.splice(index, 1)
    },
    handleColorChange(e, index) {
      const {
        color
      } = this.value
      color[index] = e.target.value
      this.$set(this.value, "color", [...color])
    },
    handleVisibleChange (val) {
      this.visible = val
    }
  },
  computed: {
    background() {
      return getGradientBg(this.value)
    }
  },
  components: {
  }

}
</script>

<style lang="less" scoped>
  @import url("./index.less");
</style>
